<template>
<Modal id="substationAdd" ref="substationAdd" v-model="modSta" title="详情">
    <Cascader v-model="list.pcd" :data="partProvCityDist" @on-change="changePCD"></Cascader>
    <Input v-model="list.short" placeholder="简称"><span slot="prepend">简称</span></Input>
    <Input v-model="list.full" placeholder="全称"><span slot="prepend">全称</span></Input>
    <Input v-model="list.adress" placeholder="详细地址"><span slot="prepend">详细地址</span></Input>
    <Input v-model="list.responsor" placeholder="联系人"><span slot="prepend">联系人</span></Input>
    <Input v-model="list.phone" placeholder="联系人电话"><span slot="prepend">联系人电话</span></Input>
    <Input v-model="list.mail" placeholder="联系人电子邮件"><span slot="prepend">联系人电子邮件</span></Input>
    <Select v-model="list.voltage" placeholder="电压等级">
        <Option value="500">500</Option>
        <Option value="220">220</Option>
        <Option value="110">110</Option>
        <Option value="35">35</Option>
        <Option value="0">0</Option>
    </Select>
    <Input v-model="list.owner" placeholder="产权单位"><span slot="prepend">产权单位</span></Input>
    <Input v-model="list.maintainer" placeholder="运维单位"><span slot="prepend">运维单位</span></Input>
    <Select v-model="list.grade" placeholder="调度等级">
        <Option value="0">一级网</Option>
        <Option value="1">二级网</Option>
        <Option value="2">三级网</Option>
        <Option value="3">四级网</Option>
        <Option value="4">五级网</Option>
    </Select>
    <Input v-model="list.longitude" placeholder="经度"><span slot="prepend">经度</span></Input>
    <Input v-model="list.latitude" placeholder="纬度"><span slot="prepend">纬度</span></Input>
    <XSwitch v-model="list.status" true-value="0" false-value="1"><span slot="prepend">状态</span></XSwitch>
    <Select v-model="list.type" placeholder="类型">
        <Option v-for="(type,index) in types" :value="type.value" :key="index">{{ type.label }}</Option>
    </Select>
    <!-- 提交按钮 -->
    <Button type="primary" @click.native="add">新增</Button>
</Modal>
</template>
<script>
import Vue from 'vue';
import {
    Modal,
    Row,
    Col,
    Divider,
    Form,
    FormItem,
    Input,
    Button,
    Cascader,
    Select,
    Option,
    Switch,
    Message
} from 'iview'
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations
} from 'vuex'
export default {
    name: 'SubstationAdd',
    props: {
        addModSta: {
            type: Boolean,
            required: true
        }, //模态框状态
    },
    data() {
        return {
            modSta: this.addModSta, //模态框状态
            partProvCityDist: [], //省市区数据
            voltages: [], //电压等级
            types: [], //变电站类型
            list: {
                'pcd': [],
                'pcdCode': [],
                'short': '',
                'full': '',
                'crtime': '',
                'chtime': '',
                'status': '',
                'oper': '',
                'oper_id': '',
                'adress': '',
                'type': '',
                'voltage': '',
                'grade': '',
                'maintainer': '',
                'owner': '',
                'longitude': '',
                'latitude': '',
                'responsor': '',
                'mail': '',
                'phone': '',
                'sid': ''
            }, //参数
        };
    },
    created() {
        let _self = this;
        let obj = {};
        //获取获取省市区
        this.$axios.post('/dic/allPCD', obj).then(res => {
            _self.partProvCityDist = res.data
        });
        //电压等级
        this.$axios.post('/dic/voltage', obj).then(res => {
            _self.voltages = res.data
        });
        //变电站类型
        this.$axios.post('/dic/substype', obj).then(res => {
            _self.types = res.data
        });
    },
    mounted() {},
    computed: {},
    methods: {
        //新增
        add() {
            let obj = this.list;
            this.$axios.post('/substation/add', obj).then((res) => {
                if (res.data) {
                    this.$Message.success('新增成功')
                } else {
                    this.$Message.error('新增失败')
                }
            })
        },
        //修改省市区
        changePCD(value, selectedData) {
            let pcd = [],
                pcdCode = [];
            selectedData.forEach(item => {
                pcd.push(item.label);
                pcdCode.push(item.value);
            })
            this.list.pcd = pcd;
            this.list.pcdCode = pcdCode;
        }
    },
    watch: {
        addModSta(newVal, oldVal) {
            let _self = this;
            this.modSta = newVal;
        }, //父组件值改变修改子组件值
        modSta(newVal, oldVal) {
            this.$emit('updateModSta', newVal);
        }, //子组件值改变提交给父组件
    },
    components: {
        Modal,
        Row,
        Col,
        Divider,
        Form,
        FormItem,
        Input,
        Button,
        Cascader,
        Select,
        Option,
        XSwitch: Switch,
        Message
    }
}
</script>
